<template>
	<view class="content">
		<view :class="loadingPage ? 'fade-in' : 'fade-out'">
			<tn-swiper :list="play_game_images" mode="number" indicatorPosition="bottomRight" :height="400"
				imageMode="widthFix"></tn-swiper>
			<view class="box">
				<view class="user tn-flex tn-flex-col-center">
					<view class="left">
						<!-- game_img -->
						<image :src="user.avatar" mode="" class="avatar" @click="gouser"></image>
						<!-- <view class="audio tn-flex tn-flex-col-center tn-flex-row-center" @click.stop="play">
							<image src="https://web.lanmei.co/image/pause.png" class="play" v-if="playStatus" mode=""></image>
							<image src="/static/index/play.png" class="play" v-else mode=""></image>
							<text class="seconds">{{user.duration}}s</text>
						</view> -->
					</view>
					<view class="center">
						<view class="top tn-flex tn-flex-col-center">
							<text class="name">{{ user.nickname }}</text>
							<view class="tagList tn-flex">
								<!-- 男 -->
								<view class="tag nan" v-if="user.sex == 1">
									<image src="/static/index/nan.png" class="img1" mode=""></image>
									<text>{{ user.age }}</text>
								</view>
								<view class="tag nv" v-if="user.sex == 2">
									<image src="/static/index/nv.png" class="img2" mode=""></image>
									<text>{{ user.age }}</text>
								</view>
								<view class="tag tag-bg" v-if="user.is_up == 1">
									<text>包上分</text>
								</view>
							</view>
						</view>
						<view class="bottom tn-flex tn-flex-col-center tn-flex-row-between">
							<view class="game-type tn-flex tn-flex-col-center">
								<image :src="user.game_img" mode="">
								</image>
								<text class="t1">{{ user.game_name }}</text>
								<text class="t2">{{ user.play_type_name }}</text>
							</view>
						</view>
					</view>
					<!-- 
					<block v-if="user.is_myself == 1" >
						<view class="right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.is_ding == 1"
							@click="cancleDing(0)">
							<image src="/static/index/ding1.png" mode=""></image>
							<view class="t1">已置顶</view>
						</view>
						<view class="right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.is_ding == 0"
							@click="dingUser">
							<image src="/static/index/ding.png" mode=""></image>
							<view class="t1">置顶</view>
						</view>
					</block> -->


					<view class="right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.fans == 1"
						@click="followUser">
						<image src="/static/index/focus1.png" mode=""></image>
						<view class="t1">已关注</view>
					</view>
					<view class="right tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.fans == 0"
						@click="followUser">
						<image src="/static/index/focus.png" mode=""></image>
						<view class="t1">关注</view>
					</view>
				</view>
				<view class="brief">
					个人简介：{{ user.introduce }}
				</view>
				<view class="skill tn-flex tn-flex-direction-column tn-flex-row-around">
					<!-- <view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="t1">是否提供包上分服务</text>
						<text class="t1">{{user.is_up ? '是' : '否'}}</text>
					</view> -->
					<template v-if="!isAuditVersion">
						<block v-for="(item, index) in user.tags" :key="index">
							<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
								<text class="t1">{{ item.game_tags_name }}</text>
								<text class="t1">{{ item.game_tags_options }}</text>
							</view>
						</block>
						<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
							<text class="t1">约定时间</text>
							<text class="t1">{{ user.start_time }}-{{ user.end_time }}</text>
						</view>
					</template>
					<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="t1">接单数量</text>
						<text class="t1">{{ user.order_num }}</text>
					</view>
					<view class="skill-li tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="t1">价格</text>
						<view class="price">
							<text class="p1">{{ user.price }}海豚币</text>
							<text class="t1">/{{ user.unit }}</text>
						</view>
					</view>
				</view>

				<!-- <view class="score tn-flex tn-flex-col-center">
					<view class="left">
						<text class="num">{{user.score}}</text>
						<view class="label">综合评分</view>
					</view>
					<view class="right">
						<view class="r-li tn-flex tn-flex-col-center">
							<view class="label">技术水平</view>
							<view class="r-value">
								<tn-rate v-model="user.te_score" :count="count" activeColor="#AB74FF"
									:disabled="true"></tn-rate>
							</view>
						</view>
						<view class="r-li r-li-mar tn-flex tn-flex-col-center">
							<view class="label">服务态度</view>
							<view class="r-value">
								<tn-rate v-model="user.ma_score" :count="count" activeColor="#AB74FF"
									:disabled="true"></tn-rate>
							</view>
						</view>
						<view class="r-li tn-flex tn-flex-col-center">
							<view class="label">响应速度</view>
							<view class="r-value">
								<tn-rate v-model="user.res_score" :count="count" activeColor="#AB74FF"
									:disabled="true"></tn-rate>
							</view>
						</view>

					</view>
				</view> -->

				<!-- 用户评价 -->
				<view class="evaluate" v-if="pList.length" style="margin-top: 20rpx;">
					<view class="title">用户评价</view>
					<block v-for="(item, index) in pList" :key="index">
						<view class="p-list">
							<view class="p-user tn-flex tn-flex-col-center">
								<image :src="item.avatar" mode="">
								</image>
								<text class="name">{{ item.nickname }}</text>
								<view class="p-score tn-flex tn-flex-row-right">
									<tn-rate v-model="item.te_score" :count="count" :disabled="true"
										activeColor="#AB74FF"></tn-rate>
								</view>
							</view>
							<view class="p-center">{{ item.content }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="" style="height: 150rpx;"></view>
			<!-- 脚部 -->
			<view class="foot tn-flex tn-flex-col-center tn-flex-row-around">
				<!-- v-if="miniapp_switch == 1" -->
				<view class="foot-tag tn-flex tn-flex-direction-column tn-flex-col-center" @click="sendmsg">
					<image src="/static/index/xiaoxi.png" mode=""></image>
					<view class="t1">联系TA</view>
				</view>
				<!-- <view class="foot-tag tn-flex tn-flex-direction-column tn-flex-col-center" @click="giftShow = true">
					<image src="/static/index/liwu.png" mode=""></image>
					<view class="t1">送礼物</view>
				</view> -->
				<view class="btn" @click="goOrderDetalis">立即下单</view>
			</view>
			<!-- 礼物弹窗 -->
			<tn-popup v-model="giftShow" mode="bottom">
				<gift-list :user_id="user.user_id"></gift-list>
			</tn-popup>
		</view>

		<!-- 置顶弹窗 -->
		<tn-popup v-model="dingStatus" mode="bottom">
			<view class="my-popup-close" @click="closeDing">X</view>
			<view class="my-popup-title">
				置顶需选择时间及支付方可置顶!
			</view>
			<view style="text-align: center;">
				<view>置顶基础费率:<text style="font-weight: bold;">{{ ding.ding_money }}</text>海豚币/{{ ding.unit }}</view>
				<view style="margin-top: 10rpx;">预计需支付<text
						style="color: red;font-weight: bold;">{{ total_ding_money }}</text>海豚币
				</view>
			</view>
			<view class="my-popup">
				<view class="input-item">
					<input class="input-dom" type="text" v-model="ding_number" maxlength="11" placeholder="请输入置顶时间"
						@input="handleInput" />
				</view>
			</view>
			<view class="btn" style="margin: 30rpx auto; width: 80%;" @click="toPayDing">提交</view>
		</tn-popup>

	</view>
</template>
<script>
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				count: 5,
				giftShow: false,
				loadingPage: false,
				id: '',
				mid: '', //约玩id
				page: 1,
				user: '',
				play_game_images: [],
				pList: [],
				playStatus: false,
				myUserInfo: '',
				miniapp_switch: 0,
				isAuditVersion: getApp().globalData.isAuditVersion,
				dingStatus: false,
				ding: [],
				ding_number: '',
				total_ding_money: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			if (option.mid) {
				this.mid = option.mid
			}
			uni.$off('liwuoksvga')
			// 监听赠送礼物成功
			uni.$on('liwuoksvga', data => {
				this.giftShow = false
				// websocket 推送消息
				let obj = {
					"type": "give_gifts",
					"nickname": this.myUserInfo.nickname,
					"avatar": this.myUserInfo.avatar,
					"to_nickname": this.user.nickname,
					"gift": data
				}
				console.log(JSON.stringify(obj))
				this.$socket.send(JSON.stringify(obj))
			})
			uni.showLoading()
			this.InitLoadingPage()
			this.getMyUser()
			this.GetConfig()
		},
		methods: {

			handleInput(event) {
				this.total_ding_money = 0
				// event.target.value 包含了输入框的当前值
				const inputValue = event.target.value
				if (parseInt(inputValue) <= 0 || isNaN(parseInt(inputValue))) {
					return false
				}
				this.total_ding_money = this.ding.ding_money * inputValue
				// console.log('输入的内容是：' + inputValue);
				// 在这里可以根据需要处理输入的内容
			},
			closeDing() {
				this.dingStatus = false
				this.total_ding_money = 0
				this.ding_number = ''
			},
			async toPayDing() {
				let that = this
				if (this.total_ding_money <= 0) {
					this.msg('请正确填写置顶时间')
					return false
				}

				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/buy_ding',
					data: {
						id: that.user.play_user_id,
						type: 'play_user',
						number: that.ding_number
					}
				})



				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						if (result.data.msg == '余额不足') {
							that.chongzhiis = true
						}

						this.msg(result.data.msg)
						this.user.is_ding = this.user.is_ding == 0 ? 1 : 0
						setTimeout(() => {
							this.InitLoadingPage()
							this.closeDing()
						}, 3000)



					}
				}
			},
			// 置顶
			async dingUser() {
				var now = Math.floor((+new Date()) / 1000)
				var expire = this.user.ding_expire
				if (expire > now) {
					//在置顶期间内，直接置顶
					this.cancleDing(1)
				} else {
					//弹窗购买
					this.ding = this.user.ding
					this.dingStatus = true
				}
			},

			// 置顶
			async cancleDing(status) {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/user/cancle_ding',
						data: {
							id: this.user.play_user_id,
							type: 'play_user',
							status: status
						}
					})
					this.user.is_ding = this.user.is_ding == 0 ? 1 : 0
				} catch (e) {
					this.msg(e.data.msg)
				}
			},

			async GetConfig() {
				let res = await this.$request({
					method: 'post',
					url: '/api/index/GetConfig'
				})
				this.miniapp_switch = res.data.data.miniapp_switch
			},

			InitLoadingPage() {
				const promiseArr = [this.getUser(), this.getEva()]
				Promise.all(promiseArr).then(resArr => {
					this.renderPage(resArr)
				}).catch(err => {
					console.log(err)
				})
			},
			renderPage([res1, res2]) {

				// /api/play_index/info
				this.user = res1.data.data
				innerAudioContext.src = this.user.voice
				this.play_game_images = this.user.play_game_images.split(",")
				// /api/play_index/eva
				this.pList = res2.data.data.data
				this.loadingPage = true
				uni.hideLoading()
			},
			// 获取用户详情
			getUser() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_index/info',
					data: {
						play_goods_id: this.id
					}
				})
			},
			// 获取用户评价
			getEva() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play_index/eva',
					data: {
						play_goods_id: this.id,
						page: this.page
					}
				})
			},
			// 获取当前登录者信息
			async getMyUser() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/index/GetUser'
					})
					this.myUserInfo = result.data.data.userinfo
				} catch (e) {
					console.log(e)
				}
			},
			// 播放音频
			play() {
				this.playStatus = !this.playStatus
				if (this.playStatus) {
					innerAudioContext.play()
				} else {
					innerAudioContext.stop()
				}
			},

			// 关注
			async followUser() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/user/followUser',
						data: {
							user_id: this.user.user_id
						}
					})
					this.user.fans = this.user.fans == 0 ? 1 : 0
				} catch (e) {
					this.msg(e.data.msg)
				}
			},



			gouser() {
				uni.navigateTo({
					url: "/circlePages/blogger_other_user?id=" + this.user.user_id
				})
			},
			goOrderDetalis() {
				if (this.mid) {
					uni.navigateTo({
						// url: "/circlePages/order-details?id="+this.id
						url: `/circlePages/order-details?id=${this.id}&mid=${this.mid}`
					})

				} else {
					uni.navigateTo({
						url: "/circlePages/order-details?id=" + this.id
					})
				}

			},
			refreshFn() {
				this.infobody()
			},
			infobody() {
				let that = this
				if (!uni.getStorageSync('token')) {
					this.InitLoadingPage()
					this.getMyUser()
					that.loginBoxFlag = true
					return false
				} else {
					this.InitLoadingPage()
					this.getMyUser()
				}
			},
			sendmsg() {
				if (this.user.user_id == this.myUserInfo.id) {
					this.msg('自己不能撩自己')
					return
				}
				this.navigateToFn({
					url: '/minePages/chat/talk?toid=' + this.user.user_id + '&toname=' + this.user.nickname,
					checkLogin: true
				})

			},
		},

	}
</script>
<style lang="scss" scoped>
	.content {
		.box {
			padding: 0 30rpx;

			.user {
				height: 216rpx;

				.left {
					position: relative;
				}

				.avatar {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
				}

				.audio {
					height: 32rpx;
					position: absolute;
					bottom: 0;
					left: 22rpx;
					right: 22rpx;
					background: linear-gradient(90deg, #F783C3 0%, #A66FF7 100%);
					border-radius: 16rpx;

					.play {
						width: 22rpx;
						height: 22rpx;
					}

					.seconds {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 5rpx;
					}
				}

				.center {
					flex: 1;
					padding-left: 24rpx;

					.top {
						margin-bottom: 25rpx;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: $uni-text-color;
						}

						.state {
							.dian {
								width: 8rpx;
								height: 8rpx;
								border-radius: 50%;
								margin-right: 4rpx;
							}

							.text {
								font-size: 20rpx;
								font-weight: 400;
							}
						}

						.off-line {
							.dian {
								background: #999999;
							}

							.text {
								color: #979393;
							}
						}

						.tagList {
							margin-left: 16rpx;

							.tag {
								height: 34rpx;
								border-radius: 6rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
								padding: 0 8rpx;
								line-height: 34rpx;
								margin-right: 10rpx;

								.img1 {
									width: 16rpx;
									height: 16rpx;
									margin-right: 6rpx;
								}

								.img2 {
									width: 14rpx;
									height: 18rpx;
									margin-right: 6rpx;
								}
							}

							.nan {
								background: #69B7FD;
							}

							.nv {
								background-color: #FF91CF;
							}

							.tag-bg {
								background: linear-gradient(180deg, #E2A2B5 0%, #F677B3 100%);
								border-radius: 6rpx;
							}
						}
					}

					.bottom {
						.game-type {
							//height: 40rpx;
							//background: linear-gradient(90deg, #654798 0%, #211C3A 100%);
							//border-radius: 21rpx;
							height: 22px;
							background: linear-gradient(133deg, #D0D5FF 0%, #FFFFFF 100%);
							border-radius: 4px 4px 4px 4px;

							width: fit-content;
							padding-left: 8rpx;
							padding-right: 20rpx;

							image {
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
							}

							.t1 {
								font-size: 22rpx;
								font-weight: 400;
								color: #333333;
								margin-left: 6rpx;
								margin-right: 20rpx;
							}

							.t2 {
								font-size: 22rpx;
								font-weight: 400;
								color: #892fe8;
							}
						}
					}
				}

				.right {
					width: 80rpx;

					image {
						width: 48rpx;
						height: 44rpx;
					}

					.t1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 12rpx;
					}
				}
			}

			.brief {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.skill {
				// height: 478rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding: 26rpx 32rpx;
				margin-top: 32rpx;

				&-li {
					margin-bottom: 24rpx;

					.t1 {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}

					.price {
						.p1 {
							color: #e83a30;
							font-size: 30rpx;
							font-weight: Bold;
						}
					}
				}

				&-li:last-child {
					margin-bottom: 0;
				}
			}

			.score {
				height: 249rpx;

				.left {
					text-align: center;

					.num {
						font-size: 64rpx;
						font-weight: bold;
						color: #FE8ECE;
					}

					.label {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 14rpx;
					}
				}

				.right {
					margin-left: 49rpx;

					.r-li {
						.label {
							font-size: 26rpx;
							font-weight: 500;
							color: #333333;
						}
					}

					.r-li-mar {
						margin: 32rpx 0;
					}
				}
			}

			.evaluate {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx 1rpx 30rpx;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 24rpx;
					padding-top: 32rpx;
				}

				.p-list {
					margin-bottom: 40rpx;

					.p-user {
						image {
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
						}

						.name {
							font-size: 26rpx;
							font-weight: bold;
							color: #333333ad;
							margin-left: 14rpx;
						}

						.p-score {
							flex: 1;
						}
					}

					.p-center {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 20rpx;
					}
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 140rpx;
			background: #ffffff;

			.foot-tag {
				image {
					width: 40rpx;
					height: 40rpx;
				}

				.t1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 12rpx;
				}
			}

			.btn {
				width: 434rpx;
				height: 74rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 74rpx;
			}
		}
	}

	.my-popup {
		padding: 60rpx 100rpx 20rpx 100rpx;
	}

	.my-popup-title {
		padding: 40rpx;
		font-size: 34rpx;
		text-align: center;
		font-weight: 700;
	}

	.my-popup-close {
		width: 60rpx;
		height: 60rpx;
		background: #e1e1e1;
		border-radius: 50%;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 36rpx;
		float: right;
		margin: 20rpx;
	}

	.my-active-user {
		padding: 16rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.input-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: $uni-login-input-bg-color;
		border-radius: 52rpx;
		margin-bottom: 40rpx;
		padding: 0 40rpx;

		.label {
			font-size: 32rpx;
			font-weight: bold;
			color: $uni-login-title-color;
			margin-right: 40rpx;
		}

		.input-dom {
			flex: 1;
			font-size: 28rpx;
			color: $uni-login-title-color;
		}

		.text {
			font-size: 30rpx;
			color: $uni-login-title-color;
		}
	}

	.btn {

		width: 434rpx;
		height: 74rpx;
		background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
		border-radius: 37rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 74rpx;
	}
</style>